<template>
    <div class="hamburger-container"
        @click="toggle"
    >
        <SvgIcon
            a-icon="shrink"
            class="hamburger"
            :class="{'is-collapse':isCollapseRef}"
            :a-size="20"
            :a-color="aColor"
        ></SvgIcon>
    </div>
</template>
<script setup lang='ts'>
import { ref } from 'vue';
import SvgIcon from '../svg_icon/svg_icon_index.vue';
    //#region defineXxx
    defineOptions({
        name:'hamburger'
    });
    const props = defineProps({
    aColor: {
        type: String,
        default: '#fff',
    },});
    const isCollapseRef=ref(false);

    const emit = defineEmits<{
        collapse:[isCollapse:boolean],
        event2:[para1:number,para2:string],
    }>();
    //#endregion
    const toggle=()=>{
        isCollapseRef.value=!isCollapseRef.value;
        emit('collapse',isCollapseRef.value);
    }

</script>
<style lang='scss' scoped>
.hamburger-container{
    padding-left: 15px;
    padding-right: 15px;
    display: flex;
    justify-content: center;
    align-items: center;
    color:var(--el-text-color-regular);
    
    .hamburger{
        transition: all .7s;
        vertical-align: middle;
        cursor: pointer;
        // transform: rotate(0);
        transform: scaleX(1);
    }
    .hamburger.is-collapse{
        // transform: rotate(180deg);
        transform: scaleX(-1);
    }
}   
</style>